@extends('admin.layouts.base')
@section('content')
    <el-col :span="24">
        <h2>订单信息</h2>
        <div>

            <p>
                <span>ID:</span> <span>{{$order['order_id'] ?? ''}}</span>
            </p>

            <p>
                <span>用户:</span> <span>{{$order->user->name ?? ''}}</span>
            </p>

            <p>
                <span>总价:</span> <span>{{$order['totalprice'] ?? ''}}</span>
            </p>
            <p>
                <span>订单状态:</span> <span>{{$order['order_state_cn'] ?? ''}}</span>
            </p>
            <p>
                <span>下单时间:</span> <span>{{$order['time'] ?? ''}}</span>
            </p>
        </div>

        <div>
            <h3>商品</h3>
            <table class="table table-bordered">
                <thead>
                <th>名称</th>
                <th width="100">商品</th>
                <th>尺寸颜色</th>
                <th width="60">数量</th>
                <th width="60">总价</th>
                </thead>

                @foreach($order->goodsDetails as $item)
                    <tr>
                        <td>{{$item->goods_name ?? ''}}</td>
                        <td>
                            <img src="{{$item->goods->pic??''}}" alt="" width="90" height="120">
                        </td>
                        <td>{{$item->match->size ?? ''}}<br>{{$item->match->color ?? ''}}</td>
                        <td>{{$item->num ?? ''}}</td>
                        <td>{{$item->totalprice ?? ''}}</td>
                    </tr>
                @endforeach
            </table>
        </div>
        <div>
            <h3>收件信息</h3>
            <p><span>姓名:</span> <span>{{$order->address->user_name ?? ''}}</span></p>
            <p><span>电话:</span> <span>{{$order->address->tell ?? ''}}</span></p>
            <p><span>地址:</span>
                <span>{{$order->address->province ?? ''}} {{$order->address->country ?? ''}} {{$order->address->details ?? ''}}</span>
            </p>
            <p><span>邮编:</span> <span>{{$order->address->code ?? ''}}</span></p>
        </div>
    </el-col>
@endsection
@section('scripts')
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    tableData: [],
                    visible: false,
                    filter: {
                        page: 1,
                    },
                    total: 0,
                    form: {
                        name: '',
                        // region: '',
                        // date1: '',
                        // date2: '',
                        // delivery: false,
                        attrs: [],
                        // resource: '',
                        // desc: ''
                    }
                }
            },
            methods: {
                onSubmit() {
                    axios.post('/goods/store', this.form).then(function (res) {

                    });
                },
                getDetailUrl(id) {
                    let url = '{{route('admin.order.show')}}';
                    return url + '?order_id=' + id;
                },
                addDomain() {
                    this.form.attrs.push({
                        color: '',
                        size: '',
                        num: '',
                        key: Date.now()
                    });
                },
                getLists() {
                    let self = this;
                    axios.post('{{route('admin.order.list')}}', this.filter).then(function (res) {
                        if (res.data.status !== 0) {
                            self.$message('s');
                        } else {

                            self.tableData = res.data.data.data;
                            self.filter.page = res.data.data.current_page;
                            self.total = res.data.data.total;
                        }
                    })
                },
                handlePageChange(e) {
                    this.filter.page = e;
                    this.getLists();
                },
                handleShip(row) {

                    let self = this;
                    axios.post('{{route('admin.order.ship')}}', {
                        order_id: row.order_id
                    }).then(function (res) {
                        if (res.data.status !== 0) {
                            self.$message.error(res.data.msg);
                        } else {
                            self.$message('操作成功');
                            self.getLists();
                        }
                    })
                },
                getOrderStateCn(state) {
                    if (state === 1) {
                        return '待支付';
                    }
                    if (state === 2) {
                        return '待发货';
                    }
                    if (state === 3) {
                        return '待收货';
                    }
                    if (state === 4) {
                        return '已完成';
                    }
                }
            },
            mounted() {
                this.getLists();
            }
        })
    </script>
@endsection
